<script setup>
// 导入网络请求相关方法和路由、状态管理等模块
import {logout, get} from '@/net'
import router from "@/router";
import {useStore} from "@/store"
import {reactive, ref} from "vue";

// 导入 Element Plus 图标组件
import {
    Bell,
    ChatDotSquare, Connection, DataLine,
    Document, Files,
    Location, Monitor,
    Notification, Operation,
    Position,
    School,
    Umbrella, User, Search, Message, Back
} from "@element-plus/icons-vue";

// 初始化状态管理
const store = useStore()
// 控制加载状态的变量
const loading = ref(true)
// 搜索输入框的状态
const searchInput = reactive({
    type: '1',
    text: ''
})

// 获取用户信息的网络请求
get('/api/user/info', (data) => {
    store.user = data
    loading.value = false
})

// 用户登出函数
function userLogout() {
    logout(() => router.push("/"))
}
</script>

<template>
    <!-- 主要内容区域，包含加载状态 -->
    <div class="main-context" v-loading="loading" element-loading-text="正在进入，请稍后·...">
        <el-container style="height: 100%">
            <!-- 头部区域，包含logo、搜索框和用户信息 -->
            <el-header class="main-context-header">
                <el-image class="logo"
                          src="https://www.logosc.cn/uploads/output/2021/12/18/ed11df38dc4dc990a19f2e230ad21567.jpg"></el-image>
                <div style="margin-left: 20px">
                    <a href="http://xuexi365.net/login?null" target="_blank" style="text-decoration: none;color: #232326;margin: 10px 10px 10px 10px; display: flex; align-items: flex-start;">
                        <el-image class="logo1"
                                  src="https://p1.ssl.qhimg.com/t018624fb93a319bbd3.jpg"></el-image>
                        <span style="color: #232326;margin: 10px 10px 10px 10px;font-family: KaiTi;font-size: 24px;">学习通登录</span>
                    </a>
                </div>
                <div style="flex: 1;padding: 0 30px;text-align: center">
                    <!-- 搜索框，包含搜索类型选择 -->
                    <el-input v-model='searchInput.text' style="width: 100%;max-width: 500px" placeholder="搜索论坛相关内容">
                        <template #prefix>
                            <el-icon>
                                <Search/>
                            </el-icon>
                        </template>
                        <template #append>
                            <el-select style="width: 120px" v-model='searchInput.type'>
                                <el-option label="帖子广场" value="1"></el-option>
                                <el-option label="失物招领" value="2"></el-option>
                                <el-option label="校园活动" value="3"></el-option>
                                <el-option label="表白墙" value="4"></el-option>
                                <el-option label="教务通知" value="5"></el-option>
                            </el-select>
                        </template>
                    </el-input>
                </div>
                <!-- 用户信息区域，包含用户名、邮箱和头像 -->
                <div class="use-info">
                    <div class="profile">
                        <div>{{ store.user.username }}</div>
                        <div>{{ store.user.email }}</div>
                    </div>
                    <el-dropdown>
                        <el-avatar :src="store.avatarUrl"/>
                        <template #dropdown>
                            <el-dropdown-item>
                                <el-icon>
                                    <Operation/>
                                </el-icon>
                                个人设置
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-icon>
                                    <Message/>
                                </el-icon>
                                消息列表
                            </el-dropdown-item>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="userLogout" divided>
                                    <el-icon>
                                        <back/>
                                    </el-icon>
                                    退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <!-- 主体区域，包含侧边栏和主要内容 -->
            <el-container>
                <el-aside width="230px">
                    <el-scrollbar style="height: calc(100vh - 55px);">
                        <el-menu
                            router
                            :default-active="$route.path"
                            style="height: calc(100vh - 55px)">
                            <!-- 校园论坛相关菜单 -->
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon>
                                        <Location/>
                                    </el-icon>
                                    <span><b>校园论坛</b></span>
                                </template>
                                <el-menu-item index="/index">
                                    <template #title>
                                        <el-icon>
                                            <ChatDotSquare/>
                                        </el-icon>
                                        帖子广场
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Bell/>
                                        </el-icon>
                                        失物招领
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Notification/>
                                        </el-icon>
                                        校园活动
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Umbrella/>
                                        </el-icon>
                                        表白墙
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <school/>
                                        </el-icon>
                                        雪峰考研
                                        <el-tag style="margin-left: 10px " size="small">合作机构</el-tag>
                                    </template>
                                </el-menu-item>
                            </el-sub-menu>
                            <!-- 探索与发现相关菜单 -->
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon>
                                        <Position/>
                                    </el-icon>
                                    <span><b>探索与发现</b></span>
                                </template>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Document/>
                                        </el-icon>
                                        成绩查询
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Files/>
                                        </el-icon>
                                        班级课程表
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Monitor/>
                                        </el-icon>
                                        教务通知
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Connection/>
                                        </el-icon>
                                        在线图书馆
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <DataLine/>
                                        </el-icon>
                                        预约教室
                                    </template>
                                </el-menu-item>
                            </el-sub-menu>
                            <!-- 个人设置相关菜单 -->
                            <el-sub-menu index="3">
                                <template #title>
                                    <el-icon>
                                        <Operation/>
                                    </el-icon>
                                    <span><b>个人设置</b></span>
                                </template>
                                <el-menu-item index="/index/user-setting">
                                    <template #title>
                                        <el-icon>
                                            <User/>
                                        </el-icon>
                                        个人信息设置
                                    </template>
                                </el-menu-item>
                                <el-menu-item index="/index/privacy-setting">
                                    <template #title>
                                        <el-icon>
                                            <User/>
                                        </el-icon>
                                        账号安全设置
                                    </template>
                                </el-menu-item>
                            </el-sub-menu>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <!-- 主要内容区域 -->
                <el-main class="main-context-page">
                    <el-scrollbar style="height: calc(100vh - 55px);">
                        <router-view v-slot="{ Component }">
                            <transition name="el-fade-in-linear" mode="out-in">
                                <component :is="Component" style="height: 100%"/>
                            </transition>
                        </router-view>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style lang="less" scoped>
// 主要内容区域样式
.main-context-page {
    padding: 0;
    background-color: #f7f8fa;
}

// 暗黑模式下的主要内容区域样式
.dark .main-context-page {
    background-color: #232326;
}

// 主要内容容器样式
.main-context {
    height: 100vh;
    width: 100vw;
}

// 主要内容头部样式
.main-context-header {
    border-bottom: solid 1px var(--el-border-color);
    height: 50px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    // Logo样式
    .logo {
        height: 110px;
        margin-left: 0px;
    }

    .logo1 {
        height: 35px;
        margin-left: 0px;
        margin-top: 5px;
    }

    // 用户信息样式
    .use-info {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .el-avatar:hover {
            cursor: pointer;
        }

        .profile {
            text-align: right;
            margin-right: 20px;

            :first-child {
                font-size: 18px;
                font-weight: bold;
                line-height: 20px;
            }

            :last-child {
                font-size: 10px;
                color: grey;
            }
        }
    }
}
</style>

